<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar
      title="备注设置"
      left-text="返回"
      :bordered="false"
      left-arrow
      @click-left="handleClickLeft"
    />
    <view class="box-border flex-1 overflow-hidden p-[10px]">
      <view class="overflow-hidden rounded-lg bg-white">
        <wd-cell-group border>
          <wd-cell center>
            <wd-switch size="20px" />
            <template #title>
              <view class="flex items-center">
                <wd-text text="订单备注" size="14px" color="#333" />
                <wd-icon name="help-circle" size="12px" class="ml-1" color="#909193" />
              </view>
            </template>
          </wd-cell>
          <wd-cell vertical>
            <template #title>
              <view class="flex items-center">
                <wd-text text="备注提示文案" size="14px" color="#333" />
                <wd-icon name="help-circle" size="12px" class="ml-1" color="#909193" />
              </view>
            </template>
            <wd-textarea
              no-border
              auto-height
              placeholder="默认文案：请输入口味偏好等要求"
              :maxlength="20"
              show-word-limit
            />
          </wd-cell>
          <wd-cell
            title="订单备注标签"
            label="订单备注输入框下展示，方便顾客输入"
            center
            is-link
            value="已启用1个"
            to="/pages/mobileOrdering/moreSetting/remarkList"
          />
          <wd-cell center label="开启后，如顾客为填写备注，弹窗提示顾客填写备注">
            <wd-switch size="20px" />
            <template #title>
              <view class="flex items-center">
                <wd-text text="备注提醒" size="14px" color="#333" />
                <wd-icon name="help-circle" size="12px" class="ml-1" color="#909193" />
              </view>
            </template>
          </wd-cell>
        </wd-cell-group>
      </view>
      <wd-cell center class="mt-3 rounded-lg">
        <wd-switch size="20px" />
        <template #title>
          <view class="flex items-center">
            <wd-text text="菜品备注" size="14px" color="#333" />
            <wd-icon name="help-circle" size="12px" class="ml-1" color="#909193" />
          </view>
        </template>
      </wd-cell>
    </view>
    <view class="flex border-t-1 border-border border-t-solid bg-white p-4">
      <wd-button type="primary" :round="false" class="flex-1">保存</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
